<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
</head>

<body>
    333
    <div class="wrap">
        222
        <div id="box">111</div>
    </div>
    <script>
        // 事件的类型 包括事件的传播有两种
        // 冒泡和捕获
        // 冒泡是从最精确的元素触发到最不精确的元素
        // 捕获是从最不精确的元素触发到最精确的元素
        // 默认的事件传播方式是冒泡
        // 一些老的ie浏览器 默认的是捕获

        // 绑定事件 有标签内绑定 获取元素绑定 事件监听绑定
        // 前两种 不能定义事件的传播方式只能是默认的冒泡
        // 事件监听比着默认的事件绑定 可以改变传播的方式
        let box = document.getElementById("box");
        let wrap = document.getElementsByClassName("wrap");
        console.log(box); //通过id拿到的元素是一个单个的元素
        console.log(wrap); //通过类名或者标签名字拿到的 是一个集合 用的时候要加下标
        // box.onclick = function(e) {
        //     e.stopPropagation();//原生js的阻止冒泡的方法
        //     alert(1111);
        // };
        // wrap[0].onclick = function() {
        //     alert(222);
        // };
        // 如果以后用原生js开发 尽量用addeventListener 去绑定事件
        box.addEventListener(
            "click",
            function() {
                alert("111");
            },
            true
        );
        wrap[0].addEventListener(
            "click",
            function() {
                alert("222");
            },
            true
        );
        // 第三个参数 true就是捕获 false就是冒泡
        // 事件监听的特点：
        // 可以重复绑定事件 
        // 可以移除事件
        // 可以规定是冒泡还是捕获

        // 事件委托
        // 把事件委托给父元素或者祖父元素甚至根元素 利用的是事件冒泡
        // 举例：瀑布流
    </script>
</body>

</html>

</html>